<!-- 转岗  -->
<template>
  <div class="rthcHead">
    <div class="rthcImg">
      <img src="@/assets/img/personnelImage/岗位需求库.png">
      <span class="rthcTi" title="岗位调动台账">岗位调动台账</span>
    </div>
    <div class="rthc-handle">
      <span class="rthc-handle-pri">
        <el-button type="primary" @click="ctLink">岗位调动申请</el-button>
      </span>
      <div class="rthc-handle-more">
       <el-dropdown>
          <el-icon>
            <setting/>
        </el-icon>
       <template v-slot:dropdown>
         <el-dropdown-menu>
           <el-dropdown-item icon="el-icon-plus" @click="ctLink">新建岗位调动申请</el-dropdown-item>
           <el-dropdown-item icon="el-icon-circle-plus-outline" @click="agreeByPosId">审批</el-dropdown-item>
           <el-dropdown-item icon="el-icon-check" @click="cancelByPosId">驳回</el-dropdown-item>
         </el-dropdown-menu>
       </template>
    </el-dropdown>
    </div>
  </div>
  </div>
  <div style="height: 100%; min-height: 235px;">
    <div class="rthc-list-table" style="margin-top: 0">
    <el-table ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              :header-cell-style="{background:'#F7FBFE',color:'#606266'}"
              @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" :selectable="selectableStatus" />
      <el-table-column type="expand">
        <template #default="props">
          <img :src="props.row.empVo.resume.personalPhoto" width="460px" height="649px"/>
          <p>姓名: {{ props.row.empVo.resume.name}}</p>
          <p>性别: {{ props.row.empVo.resume.sex}}</p>
          <p>部门: {{ props.row.empVo.dept.deptName }}</p>
          <p>岗位: {{ props.row.empVo.position.name }}</p>
          <p>上级: {{ props.row.empVo.superior.empName}}</p>
          <p>状态:
            <el-tag v-if="props.row.positionTransfer.status === 0">转岗中</el-tag>
            <el-tag class="ml-2" type="success" v-else-if="props.row.positionTransfer.status === 1">已结束</el-tag>
          </p>
          <p>电话: {{ props.row.empVo.resume.contactPhone}}</p>
          <p>邮件: {{ props.row.empVo.resume.email }}</p>
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="empVo.resume.name" />
      <el-table-column label="原部门" prop="empVo.dept.deptName" />
      <el-table-column label="原岗位" prop="empVo.position.name" />
      <el-table-column label="新部门" prop="positionTransfer.targetDeptName"/>
      <el-table-column label="新岗位" prop="positionTransfer.targetPositionName" />
      <el-table-column label="调岗流程ID" prop="positionTransfer.processId" />
      <el-table-column label="流程状态" prop="positionTransfer.status" :formatter="stateChange"/>
    </el-table>
    <div class="pag-block" style="">
      <el-pagination
          @current-change="handleCurrentChange"
          :total="paging.total"
          :page-size="paging.pageSize"
          :hide-on-single-page="hidePaging"
      />
    </div>
  </div>
  </div>
</template>

<script>
import {aByPosId, cByPosId, selAllPos} from "../../../network/per/emplHandling";

export default {
  data() {
    return {
      paging: {
        pageNum: 1,
        pageSize: 5,
        total: null,
      },
      hidePaging: false,
      restaurants: [],
      state: '',
      tableData: [],
      multipleSelection: []
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    selectableStatus:function (row,index){
      if (row.positionTransfer.status === 0){
        return true;
      }
    },
    stateChange(row, column) {
      if (row.positionTransfer.status === 0) {
        return '审批中'
      }else if (row.positionTransfer.status === 1){
        return '审批通过'
      }else {
        return '已失效'
      }
    },
    init(){
      selAllPos().then((das)=>{
        console.log(" init---> ",das)
        this.tableData = das.data.list
      })
    },
    ctLink(){
      this.$router.push({path:'/ct'})
    },
    handleCurrentChange(val) {
      selAllPos(10,val).then((das)=>{
        console.log("das-> ", das)
        this.tableData = das.data.list
      })
    },
    handleSelectionChange(val) {
      for (let i = 0; i < val.length; i++) {
        this.multipleSelection.push(val[i].positionTransfer.id)
      }
    },
    agreeByPosId(){
      if (this.multipleSelection.length < 1){
        this.$notify({
          title: '警告',
          message: '请最少选择一条数据后操作！',
          type: 'error'
        })
        return
      }else
      aByPosId(this.multipleSelection).then((das)=>{
        if (das.code === 200) {
          this.$notify({
            title: '成功',
            message: '这是一条成功的提示消息',
            type: 'success'
          })
        }else{
          this.$notify({
            title: '失败',
            message: '这是一条失败的提示消息',
            type: 'error'
          })
        }
        this.init()
      })
    },
    cancelByPosId(){
      if (this.multipleSelection.length < 1){
        this.$notify({
          title: '警告',
          message: '请最少选择一条数据后操作！',
          type: 'error'
        })
        return
      }else
        cByPosId(this.multipleSelection).then((das)=>{
        if (das.code === 200) {
          this.$notify({
            title: '成功',
            message: '这是一条成功的提示消息',
            type: 'success'
          })
        }else{
          this.$notify({
            title: '失败',
            message: '这是一条失败的提示消息',
            type: 'error'
          })
        }
        this.init()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/css/personnelCss/RecruitHeadcount";
</style>